<script setup lang='ts'>
import ChannelNav from '@/components/ChannelNav.vue';
import ArticleList from '@/components/ArticleList.vue';
import type { ChannelItem } from '@/types';
import { getChannelAPI } from '@/api/channel';
import { onMounted, ref } from 'vue';
onMounted(() => {
    getChannel()
})
const channelList = ref<ChannelItem[]>([])
const activeId = ref(0)
const getChannel = async () => {
    const result = await getChannelAPI()
    channelList.value = result.channels
    activeId.value = result.channels[0].id
}
const updateActiveId = (id: number) => {
    activeId.value = id
}

</script>

<template>
    <!-- 频道 -->
    <ChannelNav :channels="channelList" :active-id="activeId" @update-active-id="updateActiveId"></ChannelNav>
    <!-- 列表 -->
    <ArticleList :active-id="activeId"></ArticleList>

</template>

<style scoped></style>